<template>
  <div>
    <!-- -------------------分配权限-------------------- -->
    <el-dialog title="分配权限" :visible.sync="ridsVisible" width="50%" @close="ridsClose">
      <!-- form主体内容 -->
      <el-tree
        :data="rightsData"
        :props="rightsProps"
        show-checkbox
        default-expand-all
        node-key="id"
        :default-checked-keys="rigthsArr"
      ></el-tree>
      <!-- form底部按钮 -->
      <span slot="footer">
        <el-button @click="ridsVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="ridsVisible" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //弹出框显示隐藏
      ridsVisible: false,
      // 权限数据
      rightsData: [],
      // 装配tree菜单数据源
      rightsProps: {
        children: "children",
        label: "authName",
      },
      rigthsArr: [105, 116],
    };
  },
  created() {
    this.getRightsData();
  },
  methods: {
    //弹出框显示
    showDialog() {
      this.ridsVisible = true;
    },
    // 关闭弹出框事件
    ridsClose() {
      this.ridsVisible = false;
    },
    // 获取权限数据
    getRightsData() {
      this.$axios
        .get("rights/tree")
        .then((res) => {
          //console.log(res);
          if (res.data.meta.status == 200) {
            this.rightsData = res.data.data;
          } else {
            this.$message.error("获取数据失败");
          }
        })
        .catch((error) => {
          console.log(error); //cathch用于处理错误事件
        });
    },
    // 递归
    rigthsArrFun(){
      
    }
  },
};
</script>
 
<style scoped>
</style>